<template>
  <div class="account-list">
    <Pane>
      <span slot="title">账户列表</span>
      <div slot="content">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          ref="singleTable"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            width="260"
          ></el-table-column>
          <el-table-column
            prop="userGroup"
            label="用户组"
            width="260"
          ></el-table-column>
          <el-table-column
            prop="ctime"
            label="创建时间"
            width="260"
          ></el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="handleDel(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="margin-top:30px"
        >
        </el-pagination>

        <!-- 批量操作 -->
        <div style="margin-top:30px">
          <el-button type="danger" size="small" @click="batchDel"
            >批量删除</el-button
          >
          <el-button type="primary" size="small" @click="cancelSelect"
            >取消选择</el-button
          >
        </div>
      </div>
    </Pane>
  </div>
</template>

<script>
import Pane from "@/components/Pane/Pane";
// 引入数据请求
import { getAccountList, batchDelAccount } from "@/api/account";
export default {
  components: {
    Pane,
  },
  data() {
    return {
      // 当前页
      currentPage: 1,
      // 定义table数据
      tableData: [],
      pageSize: 3,
      total: 10,
      ids: "",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 获取数据
    async fetchData() {
      let { total, data } = await getAccountList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      // 处理时间
      data.forEach((v) => {
        v.ctime = this.$moment(v.ctime).format("YY-MM-DD HH:MM:SS");
      });
      // console.log(total, data);
      this.total = total;
      this.tableData = data;
    },
    // 当前页
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
    },
    // 删除
    handleDel(id) {
      console.log(id);
    },
    // 取消选择
    cancelSelect() {
      this.$refs.singleTable.clearSelection();
    },
    handleSelectionChange(rows) {
      // console.log(rows);
      this.ids = rows.map((v) => v.id);
      console.log(this.ids);
    },
    // 批量删除
    async batchDel() {
      //优化
      if (!this.ids) {
        this.$message.error("小哥哥，你选择了以后，方可以进行操作哦~~~");
        return;
      }
      // 进行操作了
      let { code } = await batchDelAccount({
        ids: JSON.stringify(this.ids),
      });
      if (code === 0) {
        this.fetchData();
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
